<template>
  <div class="chart-box">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: 'pie',
    props: {
      chConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      //是否禁止legend的默认点击事件
      banLegendDefaultClick:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        myChart: null,
        polar: {
          title: {
            text: this.chConfig.title,
            textStyle: {
              fontSize: 14,
              color: '#333',
            },
            left: 50,
          },
          color: this.chConfig.color,
          tooltip: {
            show: false,
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            type: 'scroll',
            show: this.chConfig.legend.show,
            width: this.chConfig.legend.width,
            top: this.chConfig.legend.top,
            left: this.chConfig.legend.left,
            right: this.chConfig.legend.right,
            textStyle: {
              color: '#333',
            },
            orient: 'vertical',
            formatter: (name) => {
              let data = this.chConfig.list;
              let barValue = '';
              data.forEach(item => {
                if (item.name == name) {
                  barValue = item.value;
                }
              });
              return name + '   ' + barValue + "%";
            },
            height: this.chConfig.legend.height,
          },
          grid: {
            top: '50%',
            // left: '100%',
            right: '0',
          },
          series: [
            {
              name: this.chConfig.seriesName,
              type: 'pie',
              radius: this.chConfig.legend.radius || '50%', //第一个参数是从里往外扩，第二个参数是从外往里扩
              center: this.chConfig.legend.center || ['50%', '50%'],
              silent: 'true', //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
              avoidLabelOverlap: false,
              label: {
                show: false,
              },
              data: this.chConfig.list,
            },
          ],
        },
      };
    },

    mounted() {},

    methods: {
      initChart() {
        const chart = this.$refs.chart;
        this.myChart = echarts.init(chart);
        this.myChart.setOption(this.polar);
        window.addEventListener('resize', () => {
          this.resize();
        });
        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', () => {
            this.resize();
          });
        });
        this.myChart.on('legendselectchanged', params => {
          this.clickLegend(params);
        });
      },
      resize() {
        this.$nextTick(() => {
          this.myChart.resize();
        });
      },
      clickLegend(params) {
        console.log(params);
        if (this.banLegendDefaultClick) {
          this.myChart.setOption({
            legend: { selected: { [params.name]: true } },
          });
        }

        this.$emit('clickLegend', params.name);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .echarts,
  .chart,
  .chart-box {
    width: 100%;
    height: 100%;
  }
</style>
